@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';
@import "../../base/scss/variables";
@import '~bootstrap/scss/mixins/_grid';
@import '~bootstrap/scss/mixins/_breakpoints';

.wizard-header {
    text-align: center;
    margin-bottom: 30px;

    .logo {
        width: 100px;
        height: 100px;
    }

    p {
        opacity: 0.8;
    }
}

.wizard-block {
    margin-bottom: 30px;
}

.wizard {
    .wizard-nav-container {
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        margin: -30px -30px 30px -30px;
        background: $gray-bg;

        ul.wizard-nav {
            list-style: none outside none;
            padding: 0;
            margin: 0;

            li {
                background: $gray-bg;
                color: $text-color;
                float: left;
                margin: 0;
                padding: 0 20px 0 30px;
                font-size: 1.6rem;
                height: 46px;
                line-height: 46px;
                position: relative;

                &.active {
                    font-weight: normal;
                    background: #fff;
                    color: $primary;

                    .chevron:before {
                        border-left: 14px solid #fff;
                    }
                }

                .chevron {
                    border: 24px solid transparent;
                    border-left: 14px solid $border-color;
                    border-right: 0;
                    display: block;
                    position: absolute;
                    right: -14px;
                    top: 0;
                    z-index: 1;

                    &:before {
                        content: "";
                        border: 24px solid transparent;
                        border-left: 14px solid $gray-bg;
                        border-right: 0;
                        display: block;
                        position: absolute;
                        right: 1px;
                        top: -24px;
                    }
                }

                @include media-breakpoint-down(lg) {
                    font-size: 1.4rem;
                    padding: 0 5px 0 20px;
                }

                @include media-breakpoint-down(md) {
                    display: none;

                    &.active {
                        display: list-item;
                    }
                }
            }
        }

        .btn {
            margin-top: 4px;
            margin-right: 20px;
        }
    }

    @include media-breakpoint-down(lg) {
        .wizard-nav-container {
            li {
                font-size: 1.2rem;
                padding: 0 5px 0 20px;
            }
        }
    }

    @include media-breakpoint-down(md) {
        .wizard-nav-container {
            li {
                display: none;

                &.active {
                    display: list-item;
                }
            }
        }
    }

    .wizard-pane-container {
        .wizard-pane {
            display: none;

            .btn-wizard-skip {
                margin-left: 20px;
                margin-right: 20px;
            }

            &.active {
                display: block;
            }

            .pane-header {
                margin-bottom: 2rem;

                img {
                    height: 32px;
                }

                p {
                    font-size: 2.5rem;
                    font-weight: 500;
                    margin-top: 0;
                    margin-bottom: 50px;

                    small {
                        font-size: 60%;
                    }
                }
            }

            .service-provider-form {
                border: 2px solid #ededed;
                border-radius: 4px;
                padding: 20px;
                margin-bottom: 20px;

                .service-detail-form {
                    margin-top: 20px;
                }
            }
        }
    }
}

div.action-bar {
    i {
        margin-right: 8px;
    }

    .clearfix {
        margin-bottom: 10px;
    }
}

// TODO: Fix the error caused by one of the mixins
// div.wizard-pane.general div.action-bar {
//     @include make-col-ready();

//     @include media-breakpoint-up(md) {
//         @include make-col-offset($md, 4);
//         @include make-col(7);
//         padding-left: 5px;
//         padding-right: 15px;
//     }

//     @include media-breakpoint-up(lg) {
//         @include make-col-offset($lg, 4);
//         @include make-col(7);
//         padding-left: 5px;
//         padding-right: 10px;
//     }

//     @include media-breakpoint-up(xl) {
//         @include make-col-offset($xl, 3);
//         @include make-col(5);
//         padding-left: 10px;
//         padding-right: 5px;
//     }

//     float: none !important;
// }

// div.wizard-pane.carrier div.action-bar,
// div.wizard-pane.payment div.action-bar {
//     @include make-col-ready();

//     @include media-breakpoint-down(md) {
//         @include make-col-offset($md, 3);
//         @include make-col(6);
//     }

//     @include media-breakpoint-up(md) {
//         padding-left: 0px;
//         padding-right: 0px;
//     }

//     float: none !important;
// }
